<script setup lang="ts" name="NodeTypesList">
import { Panel } from '@vue-flow/core';
import { ElIcon } from 'element-plus';
import type { NodeTemplate } from '@/types/node_templates';
import { nodeTemplates } from '@/types/node_templates';
import { Plus } from '@element-plus/icons-vue'
import { defineProps, ref, computed, onMounted } from 'vue';

const props = defineProps({
  nodes: { type: Array, required: true }
})

const hasNodeType = (type: string) => {
  return computed(() => {
    return props.nodes.some((node: any) => node.type === type)
  })
}

const contentRef = ref(null)
const searchKeyword = ref('')


const categories = computed(() => {
  const values = Object.values(nodeTemplates)
  return [...new Set(values.map(item => item.category))]
})

const activeNames = ref(categories.value)

const nodeTypes = computed(() => Object.values(nodeTemplates))

const filteredNodeTypes = computed(() => {
  if (!searchKeyword.value) return nodeTypes.value

  const keyword = searchKeyword.value.toLowerCase()
  return nodeTypes.value.filter(
    (type) =>
      type.name.toLowerCase().includes(keyword) ||
      type.type.toLowerCase().includes(keyword)
  )
})

const groupedNodeTypes = computed(() => {
  const groups: Record<string, NodeTemplate[]> = {}

  filteredNodeTypes.value.forEach(nodeType => {
    const category = nodeType.category || '其它'
    if (!groups[category]) {
      groups[category] = []
    }
    groups[category].push(nodeType)
  })

  return Object.entries(groups).map(([category, items]) => ({
    category,
    items
  }))
})

const emit = defineEmits(['addNode']);

function handleNodeSelect(nodeTemplate: NodeTemplate) {
  emit('addNode', nodeTemplate)
}

</script>

<template>
  <Transition name="fade">
    <div class="content" ref="contentRef">
      <el-input class="search-input" v-model="searchKeyword" placeholder="搜索节点类型" size="large"
        style="margin-bottom: 20px;" clearable />
      <el-collapse class="collapse-container" v-model="activeNames">
        <el-collapse-item :name="group.category" v-for="(group, index) in groupedNodeTypes" :key="index">
          <template #title>
            {{ group.category }}
          </template>

          <div class="list-container">
            <div v-for="nodeType in group.items" :key="nodeType.type" class="node-item"
              :class="{ disabled: ['start', 'end'].includes(nodeType.type) && hasNodeType(nodeType.type).value }"
              @click="!(['start', 'end'].includes(nodeType.type) && hasNodeType(nodeType.type).value) && handleNodeSelect(nodeType)">
              <div class="node-icon">
                <component :is="nodeType.icon" />
              </div>
              <div class="node-name">{{ nodeType.name }}</div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </Transition>
</template>

<style scoped>
.search-input {
  display: inline-flex;
  width: 100%;
}

.search-input .el-input__inner {
  padding-right: 40px !important;
  /* 为清除图标预留空间 */
}

.content {
  top: 10px;
  width: 20%;
  min-width: 240px;
  padding: 10px;
  min-height: 800px;
  height: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  position: relative;
  z-index: 5;
  overflow-y: visible;
}

.collapse-container {
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  border: none;
  /* 滚动 */
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc transparent;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  /* 可选：配合透明度变化 */
}

.list-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.node-item {
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
  border: solid 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-item:hover {
  background: #f0f7ff;
  transform: translateY(2px);
  box-shadow: 0 5px 10px rgba(44, 152, 240, 0.2);
  border: 1px solid #4da1ff;
}

.node-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f5f7fa;
  box-shadow: none;
  border: 1px solid #e4e7ed;
}

.node-item.disabled:hover {
  transform: none;
  background: #f5f7fa;
}

.node-icon {
  width: 26px;
  height: 26px;
  padding: 4px;
  background: #e8f4ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c8dfb;
  flex-shrink: 0;
}

.node-name {
  font-size: 12px;
  color: #34495e;
  font-weight: 500;
  line-height: 1.2;
}

:deep(.el-collapse-item) {
  margin-bottom: 0px;
  /* 原始可能是 16px 左右，可以减小 */
}

/* 去掉每个 el-collapse-item 的边框 */
:deep(.el-collapse-item__wrap) {
  border-bottom: none;
}

:deep(.el-collapse-item__header) {
  height: 30px;
  line-height: 30px;
  padding: 10px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: none;
  margin-bottom: 4px;
}

.el-input__inner {
  background: #f5f9ff;
  border: 1px solid #e1eaf9;
}
</style>
